<!-- subpkg_medicine/order_detail/index.vue -->
<script lang="ts" setup>
import { deleteOrderAPI } from '@/api/order';
import { useOrderDetail } from '@/hooks/order';

  
  const props = defineProps<{
    orderId: string
  }>()
  const { orderDetail } = useOrderDetail(props.orderId)
  const deleteOrder = async () => {
    await deleteOrderAPI(props.orderId)
    uni.showModal({
      title: '提示',
      content: '确定要删除订单吗？',
      success: (res) => {
        if (res.confirm) {
          uni.navigateBack()
        }
      }
    })
  }
</script>

<template>
  <scroll-view background-color="#f6f6f6">
    <view class="medicine-page">
      <view class="page-header">
        <view class="order-status">
          <text class="label">药品订单 {{orderDetail?.actualPayment}}元</text>
          <text class="status">{{orderDetail?.statusValue}}</text>
        </view>
        <view class="order-shippment">
          <template v-if="orderDetail?.status === 11">
            <view class="region">
              <text class="iconfont icon-location"></text>
              {{orderDetail?.addressInfo.province}}
              {{ orderDetail.addressInfo.city }}
              {{ orderDetail.addressInfo.county }}
            </view>
            <view class="detail">{{orderDetail?.addressInfo.addressDetail}}</view>
            <view class="receiver">{{orderDetail?.addressInfo.receiver}} {{orderDetail?.addressInfo.mobile}}</view>
          </template>
          <template v-else>
            <navigator hover-class="none" :url="`/subpkg_consult/timeline/index?orderId=${orderId}`">
              <view class="marker">{{ orderDetail?.expressInfo.content }}</view>
              <view class="datetime">{{ orderDetail?.expressInfo.time }}</view>
              <view class="arrow">
                <uni-icons size="18" color="#C3C3C5" type="forward" />
              </view>
            </navigator>
          </template>
        </view>
      </view>

      <view class="order-shop">
        {{orderDetail?.expressInfo.content}}
        <text class="alt">优医质保 假一赔十</text>
      </view>
      <!-- 药品列表 -->
      <view class="medicine-list">
        <view class="medicine-list-item" v-for="medicine in orderDetail?.medicines" :key="medicine.id">
          <image
            class="medicine-cover"
            :src="medicine.avatar"
            mode="aspectFill"
          />
          <view class="medicine-info">
            <text class="name">{{medicine.name}}</text>
            <text class="unit symbol">{{medicine.specs}}片</text>
            <text class="price">¥{{medicine.amount}}</text> 
          </view>
          <view class="quantity">x{{medicine.quantity}}</view>
          <view class="guide">{{medicine.usageDosag}}</view>
        </view>
      </view>

      <!-- 订单信息 -->
      <view class="order-info">
        <uni-list :border="false">
          <uni-list-item title="药品金额" :right-text="'¥' + orderDetail?.payment" />
          <uni-list-item title="运费" :right-text="`¥${orderDetail?.expressFee}`" />
          <uni-list-item title="优惠券" show-arrow :right-text="`-¥${orderDetail?.couponDeduction}`" />
          <uni-list-item title="实付款" :right-text="`¥${orderDetail?.actualPayment}`" />
          <uni-list-item title="订单编号" :right-text="orderDetail?.orderNo" />
          <uni-list-item title="创建时间" :right-text="orderDetail?.createTime" />
          <uni-list-item title="支付方式" :right-text="orderDetail?.paymentMethod === 0 ? '微信支付' : '支付宝支付'" />
        </uni-list>
      </view>

      <view class="notice-bar" v-if="orderDetail?.status === 10">
        <uni-notice-bar text="请在14:59:59内完成支付，超时订单将取消" />
      </view>

      <!-- 底部 -->
      <view class="toolbar">
        <template v-if="orderDetail?.status === 10">
          <view class="total-amount">
            需付款: <text class="number">¥{{orderDetail?.actualPayment}}</text>
          </view>
          <view class="buttons">
            <button class="uni-button minor">取消问诊</button>
            <button class="uni-button">立即支付</button>
          </view>
        </template>
        <template v-else>
          <view class="buttons">
            <view class="delete-botton">
              <uni-icons size="24" color="#848484" type="trash" />
              <text @click="deleteOrder">删除订单</text>
            </view>
            <button class="uni-button">再次购买</button>
          </view>
        </template>
      </view>
    </view>
  </scroll-view>
</template>

<style lang="scss">
  @import './index.scss';
</style>